<template>
  <div class="banner">
    <div class="main">

      <!--        //////////////////////-->
      <!--        期刊头部-->
      <header class="periodical-header">
        <div class="periodical-header-left">
          <div class="periodical-decoration-1">学习新思想,争做新青年</div>
          <div class="periodical-title-1">
            党建期刊
          </div>
          <p class="periodical-header-text">理想信念之于房屋式栋梁，柱石立根固本。
            <br>之于个人是脊柱筋骨，能够站立天地，迎难而上的精神动力。
            <br>之于一个政党，一个民族，是干事创业的基石，凝结着初心与使命，
            <br>更是立身之本，正气之魂，力量之源。</p>

          <div class="periodical-header-book-item">
            <div class="periodical-header-book periodical-header-book-1"></div>
            <div class="periodical-header-book periodical-header-book-2"></div>
            <div class="periodical-header-book periodical-header-book-3"></div>
          </div>

          <div class="symposia-video-more">
            <!--                    //这里了解更多按钮样式与前面一个专题界面的按钮一样，但修改了些，都以这里的css样式为主-->
            <div class="symposia-video-more-svg"></div>
            <div class="symposia-video-more-text">了解更多</div>
          </div>

<!--          <img class="periodical-header-img" src="src/assets/periodical-header-img.png">-->
          <img class="periodical-header-img" src="/src/assets/images/periodical-header-img.png">

        </div>
      </header>



      <!--            ////////////////////////////////-->
      <!--            专题书籍部分-->


      <!--        这里样式与专题界面html和css相同，只是这里改变了一下两个左右按钮的间隔位置-->
      <section class="symposia-book">
        <div class="symposia-book-header">
          <h3 class="symposia-title-2">期刊精选</h3>
        </div>

        <div class="symposia-book-button symposia-book-button-1"> ◂ </div>
        <div class="symposia-book-button symposia-book-button-2"> ▸ </div>

        <div class="symposia-book-content">

          <div class="symposia-book-content-item" @click="toReadPage">
            <div class="symposia-book-content-header">

              <div class="symposia-book-img symposia-book-img-1">
              </div>
            </div>

          </div>
          <div class="symposia-book-content-item">
            <div class="symposia-book-content-header">
              <div class="symposia-book-img symposia-book-img-2">

              </div>
            </div>

          </div>
          <div class="symposia-book-content-item">
            <div class="symposia-book-content-header">
              <div class="symposia-book-img symposia-book-img-3">

              </div>
            </div>

          </div>
          <div class="symposia-book-content-item">
            <div class="symposia-book-content-header">
              <div class="symposia-book-img symposia-book-img-4">

              </div>
            </div>

          </div>
          <div class="symposia-book-content-item">
            <div class="symposia-book-content-header">
              <div class="symposia-book-img symposia-book-img-5">

              </div>
            </div>

          </div>
        </div>
      </section>



      <!--        /////////////////////////-->
      <!--        期刊分类模块-->
      <section class="periodical-book-all">


        <!--            //////-->
        <!--            标签栏左边-->
        <div class="periodical-book-tab">
          <ul class="periodical-book-tab-moudle">
            <li class="periodical-book-tab-list periodical-book-tab-list-now">
              <div class="periodical-book-sort">习近平思想</div>
            </li><li class="periodical-book-tab-list">
            <div class="periodical-book-sort">习近平思想</div>
          </li><li class="periodical-book-tab-list">
            <div class="periodical-book-sort">习近平思想</div>
          </li><li class="periodical-book-tab-list">
            <div class="periodical-book-sort">习近平思想</div>
          </li><li class="periodical-book-tab-list">
            <div class="periodical-book-sort">习近平思想</div>
          </li><li class="periodical-book-tab-list">
            <div class="periodical-book-sort">习近平思想</div>
          </li><li class="periodical-book-tab-list">
            <div class="periodical-book-sort">习近平思想</div>
          </li><li class="periodical-book-tab-list">
            <div class="periodical-book-sort">习近平思想</div>
          </li>
          </ul>
        </div>

        <!--            标签栏右边-->
        <div class="periodical-book-content">
          <ul class="periodical-book-module">
            <li class="periodical-book-list">

              <div class="periodical-book-image">
              </div>
              <h4 class="periodical-book-title">
                《毛泽东与抗美援朝》
              </h4>
            </li>
            <li class="periodical-book-list">

              <div class="periodical-book-image">
              </div>
              <h4 class="periodical-book-title">
                《毛泽东与抗美援朝》
              </h4>
            </li>
            <li class="periodical-book-list">
              <div class="periodical-book-image">
              </div>
              <h4 class="periodical-book-title">
                《毛泽东与抗美援朝》
              </h4>
            </li>
            <li class="periodical-book-list">
              <div class="periodical-book-image">
              </div>
              <h4 class="periodical-book-title">
                《毛泽东与抗美援朝》
              </h4>
            </li>
            <li class="periodical-book-list">
              <div class="periodical-book-image">

              </div>
              <h4 class="periodical-book-title">
                《毛泽东与抗美援朝》
              </h4>
            </li>
            <li class="periodical-book-list">
              <div class="periodical-book-image">

              </div>
              <h4 class="periodical-book-title">
                《毛泽东与抗美援朝》
              </h4>
            </li>
            <li class="periodical-book-list">
              <div class="periodical-book-image">

              </div>
              <h4 class="periodical-book-title">
                《毛泽东与抗美援朝》
              </h4>
            </li>
          </ul>
        </div>
      </section>


      <!--        ///////////////////////////-->
      <!--        热门书籍推荐组合部分-->
      <div class="periodical-book-introduce">

        <!--            ////////////////////-->
        <!--            期刊简介小模块-->
        <section class="periodical-message">
          <div class="periodical-message-other-item">
            <div class="periodical-message-other">
              <div class="periodical-message-other-up">
              </div>

              <div class="periodical-message-other-down">
                <h4 class="periodical-messag-other-title">雷锋的故事</h4>
                <p class="periodical-messag-other-text">雷锋性格开朗，平时很活跃，教唱歌，办墙报，说快板样样都行，上级领导安排他参加战士演出队，他就起早贪黑地背台词，后来考虑到雷锋的湖南口音与大家的普通话不协调，他就主动提出换下自己...</p>
              </div>

            </div>
          </div>

          <!--                //////////////-->
          <!--                期刊资讯模块-->
          <div class="periodical-message-major">
            <div class="periodical-message-major-content">
              <h3 class="symposia-title-2">期刊资讯</h3>

              <div class="periodical-message-major-item">
                <div class="periodical-message-major-left">
                  长江是中华民族的母亲河。长江是自然的，也是人文的。当登临高山，看大江蜿蜒，群山如峦，往往感叹自然沧桑，岁月如烟。在时间长河中，人类的历史仅是短暂的一页，而长江则可以说是地老天荒。
                </div>
                <div class="periodical-message-major-right">
                  <!--                                //这里背景图为书籍图片-->
                </div>
              </div>
              <p class="periodical-message-major-people">
                蓝勇，四川泸州人，1962年生，1983年西南师范学院历史系本科毕业，1989年西南师范大学中国古代史硕士研究生毕业，获陕西师范大学历史学硕士学位。现为西南大学历史地理研究所所长、教授，历史地理学博士点学术带头人。
              </p>
            </div>
          </div>
        </section>


        <!--            //////////////////////-->
        <!--            热门期刊模块-->
        <section class="periodical-fire">
          <h3 class="symposia-title-2">热门期刊</h3>
          <ul class="periodical-fire-module">
            <li class="periodical-fire-list">
              <div class="periodical-fire-num periodical-fire-num-hot">1</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
            <li class="periodical-fire-list">
              <div class="periodical-fire-num periodical-fire-num-hot">2</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
            <li class="periodical-fire-list">
              <div class="periodical-fire-num  periodical-fire-num-hot">3</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
            <li class="periodical-fire-list">
              <div class="periodical-fire-num">4</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
            <li class="periodical-fire-list">
              <div class="periodical-fire-num">5</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
            <li class="periodical-fire-list">
              <div class="periodical-fire-num">6</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
            <li class="periodical-fire-list">
              <div class="periodical-fire-num">7</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
            <li class="periodical-fire-list">
              <div class="periodical-fire-num">8</div>
              <div class="periodical-fire-book">乡土中国</div>
              <div class="periodical-fire-author">费孝通</div>
            </li>
          </ul>
        </section>
      </div>


    </div>
  </div>
</template>

<script setup>

import {useRouter} from "vue-router";

const router = useRouter()
const toReadPage = ()=>{
  router.push({
    path:"/reader"
  })
}
</script>


<style scoped>

body{
  background-color: rgba(229, 229, 229, 1);

}
.banner{
  width: 151.3rem;
  margin: 0 auto;
  background-color: rgba(229, 229, 229, 1);
  padding:0.5rem 0;
}


.main{
  width:108rem;
  margin: 0 auto;
  background-color: white;
}
/*<!--        //////////////////////-->*/
/*<!--        期刊头部-->*/
.periodical-header{
  width:100%;
  background-color: white;
  position: relative;
}
.periodical-header-left{
  /*width:55%;*/
  width:100%;
  height:100%;
  padding: 10rem 0rem 5rem 10rem;
  border-bottom: 1px solid #E6E8E6;
}
.periodical-decoration-1{
  position: absolute;
  font-size: 4rem;
  letter-spacing: 2px;
  font-family: 华文中宋;
  color:#E6E8E6;
  font-weight: bolder;
  top:6rem;
}
.periodical-title-1{
  font-size: 3rem;
  /*color:rgb(128,0,0);*/
  font-family:楷体;
  position: absolute;
  font-weight: bolder;
}

.periodical-header-text{
  color:grey;
  margin-top: 7rem;
  width:85%;
  line-height: 2rem;
  /*background-color: greenyellow;*/
}

.periodical-header-img{
  right:0rem;
  top:13rem;
  width:50rem;
  position: absolute;
}
.periodical-header-book-item{
  width:35rem;
  margin-top: 2rem;
  display: flex;
  justify-content: space-between;
}
.periodical-header-book{
  width:9rem;
  height:13rem;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-color:#F3F3F3;
}
.periodical-header-book-1{
  background-image: url("src/assets/images/symposia-book-2.png");
}.periodical-header-book-2{
   background-image: url("src/assets/images/symposia-book-1.png");
 }.periodical-header-book-3{
    background-image: url("src/assets/images/symposia-book-3.png");
  }
.symposia-video-more{
  position:relative;
  width:20rem;
  height: 4rem;
  height: 3.5rem;
  border-radius: 5rem;
  display: flex;
  margin-top: 3rem;
  background-color:rgba(250,250,250,0.5);
  background-color:black;
}
.symposia-video-more-svg{
  cursor: pointer;
  width:4rem;
  width:3.5rem;
  height:4rem;
  height:3.5rem;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: 2rem 2rem;
  background-size: 2rem 2rem;
  background-position: center;
  background-image: url("src/assets/svg/symposia-study.svg");
  background-color:rgb(248,83,38);
  /*background-color:#B30000;*/
  border-radius: 50%;
  position: absolute;
  left:0;
}
.symposia-video-more-text {
  font-size: 1.8rem;
  font-size: 1.4rem;
  color: #E6E8E6;
  /*color:black;*/
  font-weight: bolder;
  line-height: 4rem;
  line-height: 3.5rem;
  letter-spacing: 3px;
  margin-left: 7rem;
}



/*专题书籍部分*/
.symposia-title-2{
  margin: 1rem;
  cursor: pointer;
  /*margin-left: 1rem;*/
  font-size: 2rem;
  color: rgb(128,0,0);
  letter-spacing: 2px;
}

.symposia-book{
  width:100%;
  /*height:30rem;*/
  margin-top: 3rem;
  padding: 2rem 0rem;
  position: relative;
}
.symposia-book-header{
  padding-left: 5rem;
}

.symposia-book-button{
  width:3.5rem;
  font-size: 3.5rem;
  font-weight: bolder;
  text-align: center;
  line-height: 3rem;
  height:3.5rem;
  border-radius: 50%;
  border: 2px solid rgb(128,0,0);
  margin: 1rem;
  color: rgb(128,0,0);
  transition: all 0.1s linear;
  cursor: pointer;
  position: absolute;
  top:50%;
  z-index: 10;
}
.symposia-book-button:hover{
  background-color: rgb(128,0,0);
  color: white;
}
.symposia-book-button-1{
  left:-0.5rem;
}
.symposia-book-button-2{
  right:-0.5rem;
  z-index: 10;
}
.symposia-book-content{
  width:100%;
  /*height:30rem;*/
  display: flex;
  position: relative;
  padding: 0 2rem;
  margin-top: 1rem;
  justify-content: space-around;
}
.symposia-book-content-item{
  width:16%;
}
.symposia-book-content-header{
  width:100%;
  height:20rem;
  background-color: rgb(243,243,243);
  position: relative;

}
.symposia-book-img{
  width:8rem;
  height:13rem;
  position: absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.symposia-book-img-1{
  background-image: url("src/assets/images/symposia-book-2.png");
}
.symposia-book-img-2{
  background-image: url("src/assets/images/symposia-book-2.png");
}
.symposia-book-img-3{
  background-image: url("src/assets/images/symposia-book-2.png");
}
.symposia-book-img-4{
  background-image: url("src/assets/images/symposia-book-2.png");
}
.symposia-book-img-5{
  background-image: url("src/assets/images/symposia-book-2.png");
}

/*////////////////////////////*/
/*党建期刊分类部分*/
.periodical-book-all{
  width:100%;
  /*height:60rem;*/
  display: flex;
  padding: 2rem;
  padding-bottom: 1rem;
}
.periodical-book-tab{
  width:16rem;
  height:100%;
  margin-left: 3rem;
  padding-top: 1rem;
}
.periodical-book-tab-list{
  text-align: center;
  height: 5rem;
  line-height: 5rem;
  list-style: none;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
  border: 0.1px solid #F3F3F3;
  transition: all 0.2s linear;
}
.periodical-book-tab-list-now{
  background-color:rgb(128,0,0);
  color:white;
}

.periodical-book-sort{
  font-size: 1.4rem;
  font-weight: bolder;
}

.periodical-book-content{
  flex: 1;
  padding-bottom: 5rem;
  /*background-color: yellow;*/
}
.periodical-book-module{
  display: flex;
  justify-content:left;
  flex-wrap: wrap;
  margin-left: 2rem;
}
.periodical-book-list{
  width:18rem;
  height:20rem;
  list-style: none;
  margin: 1rem;
  position: relative;

}
.periodical-book-image{
  width:100%;
  height:17rem;
  /*background-color: greenyellow;*/
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.periodical-book-image{
  background-image: url("src/assets/images/symposia-book-3.png");
}
.periodical-book-title{
  text-align: center;
  font-size: 1.5rem;
  margin-top: 1rem;
  font-family: 楷体;

}


/*//////////////////////*/
/*热门书籍推荐组合部分*/
.periodical-book-introduce{
  width:100%;
  /*height:45rem;*/
  display: flex;
  padding-top: 3rem;
  /*background-color: blue;*/
}


/*/////////////////////////*/
/*期刊简介小模块*/
.periodical-message{
  width:80rem;
  height:100%;
  display: flex;
  padding-left: 5rem;
}
.periodical-message-other-item{
  width:20rem;
  height:100%;
  border-top: 2px solid dimgrey;
}
.periodical-message-other{
  width:20rem;
}

.periodical-message-other-up{
  width:100%;
  height:15rem;
  margin-top: 2rem;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: url("src/assets/images/periodical-message-other-up.jpg");
}
.periodical-message-other-down{
  width:100%;
  height:6rem;
}
.periodical-messag-other-title{
  font-family: 楷体;
  font-size: 1.8rem;
  font-weight: normal;
  margin-top: 1rem;
}
.periodical-messag-other-text{
  font-size: 1.2rem;
  color: grey;
}


/*//////////////////////*/
/*期刊资讯模块*/
.periodical-message-major{
  flex: 0.95;
  margin-left: 3rem;
  height:30rem;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  position: relative;
  background-image: url("src/assets/images/periodical-message-major-up.jpeg");

  /*background-color: pink;*/
}
.periodical-message-major-content{
  width:85%;
  height:24rem;
  position: absolute;
  left:10%;
  bottom: 0;
  padding: 2rem;
  padding-top: 0.5rem;
  background-color:white;
}
.periodical-message-major-item{
  height:12rem;
  width:100%;
  justify-content: space-around;
  display: flex;
}
.periodical-message-major-left{
  width:20rem;
  height:100%;
  line-height: 2rem;
}
.periodical-message-major-right{
  width:12rem;
  height:100%;
  background-repeat: no-repeat;
  background-size:contain;
  background-position: center;
  background-image: url("src/assets/images/periodical-message-major-right.png");

}

.periodical-message-major-people{
  font-size: 1rem;
  color: grey;
  line-height: 1.5rem;
  padding:1rem;
}

/*////////////////*/
/*热门期刊模块*/
.periodical-fire{
  flex: 1;
  /*background-color: greenyellow;*/
}
.periodical-fire-module{
  padding:2rem;
  padding-top: 1rem;
}
.periodical-fire-list{
  position: relative;
  height:3rem;
  line-height: 3rem;
  display: flex;
  justify-content: space-around;
}
.periodical-fire-num{
  width:2rem;
  height:2rem;
  position: absolute;
  left:-1rem;
  top:0.5rem;
  text-align: center;
  line-height: 2rem;
  background-color: #E6E8E6;
  /*color:white;*/
  color:darkgray;
  /*font-weight: bolder;*/
  border-radius: 50%;
}
.periodical-fire-num-hot{
  color: white;
  background-color: rgb(128,0,0);

}
.periodical-fire-book{
}
.periodical-fire-author{
  color: rgba(166, 166, 166, 1);
}

</style>
